<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>验证码验证</title>
    <style>
        .box {
            width: 550px;
            height: 300px;
            margin: 200px auto;
            /* background-color: pink; */
            border: 1px solid #333;
        }
        
        .ma #title {
            display: inline-block;
            width: 105px;
            height: 50px;
            background-color: pink;
            margin: 20px;
            font-size: 30px;
            line-height: 50px;
            text-align: center;
        }
        
        .ma a {
            display: inline-block;
            text-decoration: none;
        }
        
        .neirong p {
            display: inline-block;
            margin-left: 20px;
            font-size: 18px;
        }
        
        .neirong input {
            width: 100px;
            height: 30px;
        }
        
        button {
            width: 70px;
            height: 30px;
            margin: 20px;
        }
    </style>
</head>

<body>
    <div class="box">
        <div class="ma">
            <div id="title">adf34y</div>
            <a href="javascript:;" id="h">看不清楚换一张</a>
        </div>
        <div class="neirong">
            <p>验证码：</p>
            <input type="text" id="text">
        </div>
        <button id="button">确定</button>
    </div>

    <script>
        // 生成验证码
        // 整数随机数方法
        function myRandom(a, b) {
            return Math.round(Math.random() * (b - a) + a);
        }

        // 生成验证码
        function getCode() {
            var ma = '';
            var arr = ['0', '1', '2', '3', '4', '5', '6', '7', '8', '9', 'a', 'b', 'c', 'd', 'e', 'f', 'g', 'h', 'i', 'j'];
            for (var i = 0; i < 6; i++) {
                var num = myRandom(0, 15)
                ma += arr[num];
            }
            return ma;
        }

        // 获取验证码
        var code = '';

        function getMa() {
            code = getCode();
            document.getElementById('title').innerText = code;
        }


        window.onload = function() {
            getMa()
        }

        document.getElementById('h').onclick = function() {
            getMa()
        }


        document.getElementById('button').onclick = function() {
            var text = document.getElementById('text');

            if (text.value == '') {
                alert('请输入验证码！');
            } else if (code != text.value) {
                alert('您输入的验证码有误！');
                text.value = '';
                getMa();
                return false;
            } else if (code === text.value) {
                location.href = '../demo01/index.html';
            }
        }
    </script>

</body>

</html>